<template>
	<view :style="{'--color':vuex_config.themeColor1}">
		<!-- 订单状态提醒 -->
		<view class="state-box">
			<u-icon name="e656" custom-prefix="iconfont" size="60" color="#ffffff"></u-icon>
			<view class="state-icon u-m-l-20">{{ orderInfo | statusFilter }}</view>
		</view>
		<!--      收货人信息-->
		<view class="profile_box" v-if="addressVisible">
			<view class="info-box u-border-bottom">
				<!-- <u-icon name="e769" size="44" color="#666666" custom-prefix="iconfont"></u-icon> -->
				<view class="info-content">
					<view class="ob-title">
						<view class="ti_l">订单信息</view>
						<view class="sww-tp u-m-l-40" @click.stop="copyInfo">复制</view>
					</view>
					<view class="info-top u-flex">
						<view class="cont_item u-line-1">取票人:{{ orderInfo.name }}</view>
						<view class="cont_item u-line-1">手机号:{{ orderInfo.mobile }}</view>
					</view>
					<!-- <view class="info-detail u-m-t-6">{{ orderInfo.address }}</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { uniCopy } from '@/utils/uniPromise';
import { orderjs } from '@/components/sww-page-order/orderjs.js';
export default {
	mixins:[orderjs],
	props: {
		orderInfo: {
			type: Object,
			default: () => {
				return {};
			}
		},
		addressVisible:{
			type:Boolean,
			default:true
		}
	},
	data() {
		return {};
	},

	mounted() {},
	methods: {
		// 复制收货人信息
		copyInfo() {
			let info = `订单号：${this.orderInfo.order_no} 取票人：${this.orderInfo.contact_name} 手机号：${this.orderInfo.contact_mobile}`;
			uniCopy(info).then(() => {
				this.$toast('复制成功');
			});
		}
	}
};
</script>

<style scoped lang="scss">
/* 状态 */
.state-box {
	width: 100%;
	height: 140rpx;
	padding: 0 30rpx 30rpx;
	background-color: var(--color);
	color: #ffffff;
	font-size: 28rpx;
	display: flex;
	align-items: center;
}
.ob-title {
		width: 100%;
		height: 70rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		position: relative;
		font-size: 32rpx;
		margin-bottom: 10rpx;
		&::before {
			content: '';
			position: absolute;
			width: 6rpx;
			height: 28rpx;
			background-color: var(--color);
			border-radius: 3rpx;
			top: 50%;
			left: 0;
			transform: translate(0, -50%);
		}
		.ti_l{
			flex: 1;
			overflow: hidden;
		}
	}
/* 收货人信息 */
.profile_box {
	width: 100%;
	background: #fff;
	border-radius: 20rpx 20rpx 0 0;
	position: relative;
	margin-top: -30rpx;
	padding: 0 24rpx;
	overflow: hidden;
	.info-box {
		width: 100%;
		padding: 30rpx 0;
		display: flex;
		.info-content {
			flex: 1;
			overflow: hidden;
			margin: 0 24rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			font-size: 26rpx;
			color: #666666;
			.cont_item {
				flex: 1;
				overflow: hidden;
				padding-right: 16rpx;
			}
		}
	}
}
</style>
